<template>
    <el-card>
        <el-page-header @back="back" content="发布朋友圈页面"></el-page-header>

        <div class="interspaceH"></div>

        <el-form ref="form" label-position="left" :model="sendForm" label-width="120px">
            <el-form-item label="发布成员：">
                <el-button type="primary" @click="memberVisible = true">选择成员</el-button> <span style="margin-left: 10px">已选择{{ sendForm.members.length }}名成员</span>

                <el-dialog title="选择成员" :visible.sync="memberVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">
                    <MultipleSelect ref="selectMultipleMember" :listFields="listFields" :dataSource="memberList" type="filter"/>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="memberVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitMultipleMember">确 定</el-button>
                    </span>
                </el-dialog>
            </el-form-item>
            <el-form-item v-if="sendForm.members.length > 0">
                <el-tag v-for="tag in sendForm.members" :key="tag.name" closable @close="closeTagHandle(tag)" style="margin-right: 10px"> {{ tag.name }}</el-tag>
            </el-form-item>

            <el-form-item label="朋友圈内容：">
                <el-radio v-model="sendForm.contentType" label="1">图片</el-radio>
                <el-radio v-model="sendForm.contentType" label="2">视频</el-radio>
                <el-radio v-model="sendForm.contentType" label="3">文字</el-radio>
                <el-radio v-model="sendForm.contentType" label="4">图文链接</el-radio>
            </el-form-item>

            <el-form-item label="文字：">
                <el-input type="textarea" placeholder="请输入内容" v-model="sendForm.content" maxlength="500" show-word-limit></el-input>
            </el-form-item>

            <el-form-item v-if="sendForm.contentType == '1'" label="图片：">
                <div>提示：最多可添加9张图片，支持PNG、JPG、JPEG、BMP的图片，大小请限制在2M以内</div>
                <div>
                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                            <span v-if="!false" class="el-upload-list__item-delete">
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                    </el-upload>
                </div>
            </el-form-item>

            <el-form-item v-if="sendForm.contentType == '2'">
                <el-upload class="upload-demo" ref="upload" action="" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <div slot="tip" class="el-upload__tip">只支持mp4格式，请在50M以内</div>
                </el-upload>
            </el-form-item>

            <el-form-item v-if="sendForm.contentType == '4'" label="链接地址：">
                <el-input type="text" placeholder="请输入链接地址" v-model="sendForm.linkAddress" maxlength="200" show-word-limit></el-input>
            </el-form-item>

            <el-form-item v-if="sendForm.contentType == '4'" label="高级设置：">
                <el-switch v-model="sendForm.advancedSetup" show-word-limit></el-switch>
                <span style="margin-left: 10px">开启后，支持自定义链接标题、摘要、封面</span>
            </el-form-item>

            <el-form-item label="动态发布位置：">
                <el-radio v-model="sendForm.sendLocation" label="1">发布到企微朋友圈</el-radio>
                <el-radio v-model="sendForm.sendLocation" label="2">发布到企业动态</el-radio>

                <div v-if="sendForm.sendLocation == '1'" style="font-size: 12px;color: #a6a6a6">该动态以朋友圈消息形式提示员工，员工点击发送，同步到员工个人的企业微信朋友圈列表</div>
                <div v-if="sendForm.sendLocation == '2'" style="font-size: 12px;color: #a6a6a6">该动态发送后直接同步到员工企业动态（众哲鑫朋友圈）列表</div>
            </el-form-item>
            <el-form-item label="发布方式：">
                <el-radio v-model="sendForm.sendType" label="1">立即发布</el-radio>
                <el-radio v-model="sendForm.sendType" label="2">定时发布</el-radio>
                <el-radio v-model="sendForm.sendType" label="3">历史时间</el-radio>
            </el-form-item>
            <el-form-item label="选择日期：" v-if="sendForm.sendType != '1'">
                <el-date-picker
                        v-model="sendForm.sendDate"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <div style="font-size: 12px;color: #656464">发布后内容将会出现在所选成员的历史朋友圈内，客户可在成员个人信息进入历史朋友圈查看</div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="back">发表朋友圈</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>

import MultipleSelect from "@/components/list_multiple_select/list_multiple_select"

export default {
    name: "send_moments",
    components: {
        MultipleSelect
    },
    data() {
        return {
            memberVisible: false,
            sendForm: {
                members: [],
                contentType: '1',
                sendLocation: '1',
                sendType: '1',
                sendDate: '',
                linkAddress: '',
                advancedSetup: false
            },
            listFields: {
                name:'名称'
            },
            memberList: [],
        }
    },
    mounted() {
        let that = this
        for (let i = 0; i < 10; i++) {
            that.memberList.push(
                {
                    id: i,
                    name: '名称' + (i + 1)
                }
            )
        }
    },
    methods: {
        back() {
            this.$emit('currentHandle', 'default')
        },
        submitMultipleMember() {
            let data = this.$refs.selectMultipleMember.getData();
            this.sendForm.members = data
            this.memberVisible = false
        },
        closeTagHandle(tag) {
            this.sendForm.members.splice(this.sendForm.members.indexOf(tag), 1);
        }
    }
}
</script>

<style scoped>
/deep/ .el-dialog .el-dialog__body {
    padding: 0 20px;
}

/deep/ .el-dialog .el-dialog__body .interspaceH{
   height: 0;
}
</style>